<template>
  <div style=" background-color: #f5f7f9; width: 100%; min-height: 100vh;">
    <div class="center">
      <el-row :gutter="8">
        <el-col :span="5">
          <div class="grid-content">
            <div>
              <el-menu default-active="1-1">
                <el-sub-menu index="1">
                  <template #title class="left-side-item" :class="$route.path === '/trainingroom/mytrainingroom' ? 'active' : ''">
                      <span >练习室</span>
                  </template>
                    <el-menu-item index="1-1">
                      <li class="left-side-item" :class="$route.path === '/trainingroom/mytrainingroom' ? 'active' : ''">
                        <RouterLink to="/trainingroom/mytrainingroom">我的练习室</RouterLink>
                      </li>
                    </el-menu-item>
                </el-sub-menu>
          </el-menu>
            </div>
          </div>
          <div class="grid-content">
            <ul class="nav">
              <li class="left-side-item" :class="$route.path === '/trainingroom/mediacache' ? 'active' : ''">
                <RouterLink to="/trainingroom/mediacache">缓存</RouterLink>
              </li>

              <li class="left-side-item">
                <a href="javascript:;" @click="centerDialogVisible = true">音频库</a>
              </li>

              <li class="left-side-item" :class="$route.path === '/trainingroom/collections' ? 'active' : ''">
                <RouterLink to="/trainingroom/collections">收藏</RouterLink>
              </li>

              <li class="left-side-item" :class="$route.path === '/trainingroom/history' ? 'active' : ''">
                <RouterLink to="/trainingroom/history">历史</RouterLink>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="19">
          <RouterView></RouterView>
        </el-col>
      </el-row>
  </div>
</div>


<el-dialog
    v-model="centerDialogVisible"
    width="30%"
    align-center
  >
    <span>请打开中舞网APP,点击"练习室"-"音频库"中查看</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button color="#f93684" @click="centerDialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang='ts'>
import { RouterView, RouterLink } from 'vue-router';
import { reactive, ref } from 'vue';
const centerDialogVisible = ref(false)
</script>

<style scoped  lang="less">
  .center{
    width: 1000px;
    margin:auto;
    .el-row {
      margin-bottom: 20px;
    }
    .grid-content {
      border-radius: 10px;
      background-color:white ;
      margin: 20px;
      padding: 10px 0;
      .left-side-item{
          padding: 10px 30px;
          margin: 20px 0;
          /* border-left: 3px solid #f93684; */
          min-height: 36px;
          line-height: 36px;
      }
      .active{
              color: #f93684;
              border-left: 5px solid #f93684;
           }
      .el-menu {
        border:none;
     }
    }
  }
  .el-sub-menu .el-menu-item{
    min-width: 120px;
    background-color: #fff;
    /* color: black; */
  }
  .el-sub-menu .el-menu-item:hover{
    color: #f93684;
  }
  
  
  a{
    color: black;
    text-decoration: none;
  }
  a:hover{
    color: #f93684;
  }
  .left-side-item:hover{
    border-left: 5px solid #f93684;
  }
  
  
  // :root{
  //   --el-menu-hover-bg-color:#bfa
  // }
  // .el-menu  /deep/ .el-submenu__title:hover{
  //           background-image: linear-gradient(to right, white, white) !important; 
  //           background-color: white !important;
  //           border-left: 5px solid #f93684;
  //             }
              
// .el-menu  /deep/.el-submenu__title:hover {
//   background-color: white !important;
// }

// .el-menu  /deep/ .el-menu-item.is-active {
//   background: white !important;
// }
// .el-menu  /deep/ .el-submenu__title.is-active {
//   background: white !important;
// }

 
</style>